<template>
  <q-form ref="form" @submit="onSubmit" class="q-gutter-md q-pb-xl">
    <formInput ref='formInput' :fieldlist="formFields" multipleCol />

    <q-page-sticky position="bottom" :offset="[0, 28]">
      <q-btn label="保存" type="submit" color="primary" class="btn-fixed-width" icon="save" :loading="saving" />
      <q-btn label="返回" @click="onReset" color="primary" outline class="q-ml-md bg-white" />
    </q-page-sticky>
  </q-form>
</template>

<script>
import { defineComponent } from 'vue';
import formInput from 'src/components/FormInput.vue';
import { detailPageMix } from 'src/lib/mixin.js';
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';

export default defineComponent({
  name: 'consumerDetail',
  setup (props, context) {
    const $store = useStore();
    const modelLabel = '消息者信息';
    const moduleName = 'consumer';
    const detailApi = `/c2/manager/${moduleName}/detail`; // 明细数据接口
    // const createApi = `/c2/manager/${moduleName}/create`; // 新建数据接口
    const updateApi = `/c2/manager/${moduleName}/update`; // 更新数据接口

    useMeta({
      // 设置文件标题
      title: `${modelLabel}详情 - ${$store.siteConfig.appName} - 木多鱼系列`
    });

    return {
      modelLabel,
      moduleName,
      detailApi,
      // createApi,
      updateApi
    }
  },
  components: {
    formInput
  },
  mixins: [detailPageMix],
  data () {
    return {
      formFields: {
        state: { type: 'toggle', label: '状态', value: 1, trueValue: 1, trueLabel: '启用', falseValue: 0, falseLabel: '停用', readonly: false },
        sep1: { type: 'separator', label: '用户信息' },
        nickname: { type: 'input', label: '昵称', value: '', readonly: true },
        fullname: { type: 'input', label: '姓名', value: '', readonly: true },
        gender: { type: 'select', label: '性别', value: '', dict: 'gender', readonly: true },
        tel: { type: 'input', label: '注册手机', value: '', readonly: true },
        // email: { type: 'input', label: '邮箱', value: '', readonly: true },
        company: { type: 'input', label: '公司名称', value: '', readonly: true },
        sep2: { type: 'separator', label: '注册信息' },
        create_ip: { type: 'input', label: '注册ip', value: '', readonly: true },
        last_login_time: { type: 'datetime', label: '最后登录时间', value: '', readonly: true },
        last_login_ip: { type: 'input', label: '最后登录ip', value: '', readonly: true },
        login_count: { type: 'input', label: '登录次数', value: '', readonly: true },
        create_time: { type: 'date', label: '注册时间', value: '', readonly: true },
        address: {
          type: 'table',
          label: '收货地址',
          value: '',
          editmode: [],
          columns: [
            { name: 'consignee', label: '收货人', field: 'consignee', sortable: true, align: 'center' },
            { name: 'tel', label: '联系电话', field: 'tel', sortable: true, align: 'center' },
            { name: 'address', label: '收货地址', field: 'address', sortable: true, align: 'center' },
            { name: 'default', label: '默认地址', field: 'default', sortable: true, align: 'center', format: val => val ? '是' : '否' }
          ]
        }
      }
    };
  },
  async created () {
  },
  mounted () {
    this.refreshData();
  },
  methods: {
    setReadonly () {
      this.mode = 'edit';
    }, // 替换混合里的同名方法
    onSubmit () {
      this.saving = true;

      const formData = {};
      for (const field in this.formFields) {
        if (this.formFields[field].readonly === false || this.formFields[field].readonly === undefined) {
          if (this.formFields[field].type === 'select' && typeof this.formFields[field].value === 'object' && this.formFields[field].value) {
            this.data[field] = formData[field] = this.formFields[field].value.value;
          } else {
            this.data[field] = formData[field] = this.formFields[field].value;
          }
        }
      }
      this.saveData();
    }
  },
  computed: {
  },
  watch: {
  }
});
</script>
